<template>
	<div class="device-lifecycle-page" style="padding: 20px;">
		<el-table :data="devices" border stripe>
			<el-table-column prop="name" label="设备名称" />
			<el-table-column prop="code" label="设备编号" />
			<el-table-column prop="type" label="类型" />
			<el-table-column prop="status" label="当前状态">
				<template #default="{ row }">
					<el-tag :type="statusTag(row.status)">{{ row.status }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="purchaseDate" label="购置时间" width="140" />
			<el-table-column prop="lifecycle" label="生命周期阶段" />
			<el-table-column label="操作" width="160">
				<template #default="{ $index }">
					<el-button type="text" @click="openDialog($index)">变更</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="dialogVisible" title="生命周期变更" width="400px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="当前状态">
					<el-select v-model="form.status">
						<el-option label="在用" value="在用" />
						<el-option label="停用" value="停用" />
						<el-option label="报废" value="报废" />
					</el-select>
				</el-form-item>
				<el-form-item label="生命周期阶段">
					<el-select v-model="form.lifecycle">
						<el-option label="采购" value="采购" />
						<el-option label="安装调试" value="安装调试" />
						<el-option label="运行中" value="运行中" />
						<el-option label="维修中" value="维修中" />
						<el-option label="待报废" value="待报废" />
						<el-option label="已报废" value="已报废" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveChange">确认变更</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const editingIndex = ref(null)
const form = reactive({ status: '', lifecycle: '' })

const devices = ref([
	{ name: '空调主机', code: 'EQ001', type: 'HVAC', status: '在用', purchaseDate: '2021-01-10', lifecycle: '运行中' },
	{ name: '电梯-B', code: 'EQ005', type: '电梯', status: '停用', purchaseDate: '2018-07-22', lifecycle: '待报废' },
	{ name: '锅炉-1', code: 'EQ009', type: '气设备', status: '报废', purchaseDate: '2015-11-03', lifecycle: '已报废' }
])

function openDialog(index) {
	editingIndex.value = index
	Object.assign(form, {
		status: devices.value[index].status,
		lifecycle: devices.value[index].lifecycle
	})
	dialogVisible.value = true
}

function saveChange() {
	const idx = editingIndex.value
	devices.value[idx].status = form.status
	devices.value[idx].lifecycle = form.lifecycle
	ElMessage.success('状态更新成功')
	dialogVisible.value = false
}

function statusTag(status) {
	return status === '在用' ? 'success' : status === '停用' ? 'warning' : 'info'
}
</script>

<style scoped>
.device-lifecycle-page {
	max-width: 1200px;
	margin: auto;
}
</style>
